import axios from "axios"
import { Link } from "react-router-dom"
import { useEffect, useState } from 'react'
const Teleplay=()=>{
 let [data,setData]= useState([]);
 useEffect(()=>{
     const fetchData=async()=>{
         const result=await axios(
            `http://localhost:5000/search-subjects?type=tv&tag=国产剧`
         );
         setData(result.data)
     };
     fetchData()
 },[]);
 console.log(data)
    const List=[
        '热门', '最新', '豆瓣高分', '冷门佳片' ,'华语', '欧美', '韩国', '日本'
    ]
     
    
 return(
     <div className="Teleplaybox">
         <div className="row">
  <div className="slide-box">
  <div class="row row-no-gutters">
  <div class="col-xs-12 col-md-9">
  <Link className=' f-size-16 ml-3' style={{color:'black'}}>最新热门电视剧</Link>
      <span>{List.map((item,index)=>(
          <span key={index}>
             <Link className=' f-size-13 mt-1 ml-3'style={{    color:' #9B9B9B'}} to={''}>{item}</Link>
          </span>
      ))}</span>
  </div>
  <div class="col-xs-6 col-md-3"></div>
</div>
</div>
<div className="list-wp">
<ul>
    <div className="cover-box">
    {data.map(item=>(
        <li key={item.id}>
            <img src={item.cover} alt="" className="cover-img" />
          <span className="cover-title">
          {item.title}
              </span>  

        </li>
    ))}
    </div>
 
</ul>
</div>
     </div>
     </div>
 )
}

export default Teleplay